<template>
  <div class="about">
    <div class="app-warp">
      <div class="app-mb-10">
        <div>
          <el-select v-model="workInput.state.value" placeholder="识别状态" class="app-mr-15" @change="handleCurrentChange(1)">
            <el-option
                v-for="item in workInput.state.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="workInput.versionList.value" placeholder="版本号" class="app-mr-15" @change="handleCurrentChange(1)">
            <el-option
                v-for="item in workInput.versionList.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker
              v-model="workInput.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="app-mr-15"
              :picker-options="pickerOptions"
              @change="handleCurrentChange(1)">
          </el-date-picker>
          <!-- <el-input placeholder="搜索教师姓名" v-model="workInput.key_word" clearable maxLength="20" style="width: 240px;height: 30px;" @change="handleCurrentChange(1)">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrentChange(1)">搜 索</el-button>
          </el-input> -->
          <el-input placeholder="搜索识别id" v-model="workInput.key_word" clearable maxLength="10" style="width: 200px;height: 30px;" @change="handleCurrentChange(1)">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrentChange(1)">搜 索</el-button>
          </el-input> 
        </div>
      </div>
      <div>
        <div v-if="workData.tableData.length === 0" class="noAppoint">
          <p><img src="@/assets/images/common/noContent.png"/></p>
          <p>暂无数据哦~~</p>
        </div>
        <el-table
            v-if="workData.tableData.length > 0"
            :data="workData.tableData"
            border
            style="width: 100%">
          <el-table-column
              prop="rec_id"
              label="ID" >
              <template slot-scope="scope">
              <div>{{ scope.row.id}}</div>
            </template>
          </el-table-column>      
          <el-table-column
              prop="img_url"
              label="URL" width="700px">
            <template slot-scope="scope">
              <div>{{ scope.row.url}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="subject"
              label="subject">
            <template slot-scope="scope">
              <div>{{ scope.row.subject}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="state"
              label="state">
            <template slot-scope="scope">
              <div>{{ scope.row.state}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="version"
              label="version">
            <template slot-scope="scope">
              <div>{{scope.row.version}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="cast_time"
              label="castTime">
            <template slot-scope="scope">
              <div>{{scope.row.cast_time}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="createTime" width="240px">
            <template slot-scope="scope">
              <div>{{scope.row.create_time}}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope" >
              <el-button @click="lookRecognition(scope.row)" type="text" size="small" >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template>
        <div class="app-page">
          <el-pagination
              :hide-on-single-page="workData.totalSize/workData.pageSize <= 1"
              :current-page="workData.currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="workData.pageSize"
              layout="prev, pager, next, total, sizes,jumper"
              :total="workData.totalSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </template>

    </div>

    <!--确认导出excel 弹窗-->
    <div class="app-open" v-if="importExcel">
      <div class="app-open-box">
        <div class="app-open-title">
          提示 <em class="icon iconfont iconguanbi right" @click="importExcel=false"></em>
        </div>
        <div class="app-open-content">
          <div class="app-open-content-text">是否导出Excel？</div>
        </div>
        <div class="app-center app-mt-20">
          <el-button round type="primary" class="app-button" @click="importExcelOk">确  定</el-button>
          <el-button round type="warning" class="app-button" style="margin-left: 30px!important;" @click="importExcel=false">取  消</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { getResult } from '@/api/log';
import { format } from '@/utils/dateFormat';
import { getLocalTime } from '@/utils/localTime';
import axios from 'axios';
export default {
  name: 'app-main-recordMain-recordList',
  filters: {
    setTime(time) {
      let timeData = ((parseInt(time/3600)>0?parseInt(time/3600)+'小时':'')
          + (parseInt(time%3600/60)>0?parseInt(time%3600/60)+'分钟':'')
          + (parseInt(time%3600%60)>0?parseInt(time%3600%60)+'秒':''));
      return timeData!==''?timeData:'0秒';
    },
    getTime(val) {
      return format(val, 'ymdhmms');
    }
  },
  data(){
    return{
      total_live_time: '',
      total_answer_count: '',
      total_income: '',
      importExcel: false, // 是否导出弹窗
      workInput: {
        state: { //科目配置
          options: [
            {
              value: '-1',
              label: '状态'
            },
            {
              value: 0,
              label: '参数校验'
            },
            {
              value: 1,
              label: '版面分析'
            },
            {
              value: 2,
              label: '表格检测'
            },
            {
              value: 3,
              label: '中英文公式文本行分割'
            },
            {
              value: 4,
              label: '识别'
            },
            {
              value: 5,
              label: '后处理'
            },
            {
              value: 9,
              label: '成功'
            }
          ],
          value: '-1',
        },
        versionList:{
          options:[
            {
              value:-1,
              label:'版本号'
            },
            {
              value:1,
              label:'V2.0.0'
            }
          ],
          value: -1, 
        },
        time: '', // 开始结束时间
        key_word: '-1' // 课程模糊搜索查询
        },
      
      workData: {
        tableData: [{}],
        currentPage: 1,
        pageSize: 10,
        totalSize:0
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }

    }
  },
  methods: {
    handleSizeChange(val) {
      this.workData.pageSize = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.workData.currentPage = val;
      this.getList();
    },
    
    /* 获取答疑工作量列表 */
    getList() {    
      const _this = this;
      const Json = {
        page: _this.workData.currentPage,
        pagesize: _this.workData.pageSize,
        is_export: 0
      };
      if (_this.workInput.state.value !== '') {
        Json.subject_id = _this.workInput.state.value;
      }
      if (_this.workInput.time !== '' && _this.workInput.time !== null) {
        let time = _this.workInput.time.map(function (element) {
          return getLocalTime(element, 'ymdhmms');
        });
        Json.start_date = time[0];
        Json.end_date = getLocalTime(new Date(time[1]).getTime() + 24*3600*1000);
      }
      if (_this.workInput.key_word !== '') {
        Json.key_word = _this.workInput.key_word;
      }
      let startTime = "-1";
      let endTime = "-1";
      if (_this.workInput.time !== '' && _this.workInput.time !== null) {
          let time = _this.workInput.time.map(function (element) {
            return getLocalTime(element, 'ymdhmms');
          });
          startTime = time[0];
          endTime = time[1];
        }
      let log_ig = "-1";
      if (_this.workInput.key_word !== '' && _this.workInput.key_word !== null) {
        log_ig = _this.workInput.key_word;
      }  
      let dataJson = {
            "start_time":startTime,
            "end_time":endTime,
            "rec_state":_this.workInput.state.value,
            "version": _this.workInput.versionList.value,
            "id": log_ig,
        };
      
      getResult(dataJson).then(function(resp){  
          _this.workData.tableData = resp
        }).catch(function(err){
          console.log(err);
        });
      
 
    },
    /*查看识别结果*/

    lookRecognition(content){
      if(content.state==9){
        this.$router.push({ path: "/main/distinguish", 
        query:{
          "imgUrl":content.url,
          "recId":content.id
        }});
      }else{
        console.log("识别失败的不可以查看！")
      }
    },
    
  },
  
  mounted() {
    /* 初始化获取答疑工作量列表和统计 */
    this.handleCurrentChange(1);
  }
}
</script>
<style lang="scss" scoped>
.app-mb-10{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >div:nth-child(1){
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
 